<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景区领导决策-客流监控</title>
    <!-- 日期选择插件 -->
    <link rel="stylesheet" href="../plugin/jquerymobile/mobileSelect.css">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/page.css">
</head>

<body>
    <div class="box">
        <div class="header">
            <h3 class="head-font">客流监控</h3>
            <div class="select-date"><input type="text" readonly="readonly" id="trigger1" value="2020-05-12"><img
                    src="../images/arrow_down.png"></img></div>
        </div>
        <div class="num-box">
            <div>
                <p class="head-font">15643</p>
                <span>当日入园数</span>
            </div>
            <div>
                <p class="head-font">24567</p>
                <span>当日售票数</span>
            </div>
            <div>
                <p class="head-font">9846</p>
                <span>实时在园数</span>
            </div>
        </div>
        <div class="chart-box">
            <h3 class="tit-font">入园时段客流分析</h3>
            <div id="mychart1" class="my-chart"></div>
        </div>
    </div>
    <!-- 日期选择插件 -->
    <script src="../plugin/jquerymobile/auto-size.js"></script>
    <script src="../plugin/jquerymobile/mobileSelect.js"></script>
    <!-- echarts -->
    <script src="../plugin/ECharts/echarts.js"></script>
    <script src="../plugin/jquery-1.11.1.min.js"></script>
    <script>
        // echarts 数据
         var numData = ['175', '265', '426', '395', '365', '284', '396', '264', '158', '98', '48']
        //日期选择
        var years = [];
        var month = [];
        var day = [];
        var myDate = new Date();
        myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        myDate.getMonth(); //获取当前月份(0-11,0代表1月)
        myDate.getDate();
        var _data = [];
        for (i = 0; i < myDate.getFullYear() - 2000; i++) {
            //年
            var obj = {};
            var yer = 2000 + i + 1;
            obj.value = 2000 + i + 1;
            var _data2 = [];
            for (n = 0; n < 12; n++) {
                //月
                var obj2 = {};
                if (n < 9) {
                    obj2.value = '0' + (n + 1);
                } else {
                    obj2.value = n + 1;
                }
                var _data3 = [];
                if (n == 1) {
                    var cond1 = yer % 4 == 0; //条件1：年份必须要能被4整除
                    var cond2 = yer % 100 != 0; //条件2：年份不能是整百数
                    var cond3 = yer % 400 == 0;
                    var cond = cond1 && cond2 || cond3;
                    //闰年
                    if (cond) {
                        for (y = 0; y < 29; y++) {
                            //日
                            var obj3 = {};
                            if (y < 9) {
                                obj3.value = '0' + (y + 1);
                            } else {
                                obj3.value = y + 1;
                            }
                            _data3.push(obj3)
                        }
                    } else {
                        for (y = 0; y < 28; y++) {
                            //日
                            var obj3 = {};
                            if (y < 9) {
                                obj3.value = '0' + (y + 1);
                            } else {
                                obj3.value = y + 1;
                            }
                            _data3.push(obj3)
                        }
                    }
                } else if (n == 0 || n == 2 || n == 4 || n == 6 || n == 7 || n == 9 || n == 11) {
                    for (y = 0; y < 31; y++) {
                        //日
                        var obj3 = {};
                        if (y < 9) {
                            obj3.value = '0' + (y + 1);
                        } else {
                            obj3.value = y + 1;
                        }
                        _data3.push(obj3)
                    }
                } else {
                    for (y = 0; y < 30; y++) {
                        //日
                        var obj3 = {};
                        if (y < 9) {
                            obj3.value = '0' + (y + 1);
                        } else {
                            obj3.value = y + 1;
                        }
                        _data3.push(obj3)
                    }
                }
                obj2.childs = _data3;
                _data2.push(obj2);
            }
            obj.childs = _data2;
            _data.push(obj)
        }
        var mobileSelect1 = new MobileSelect({
            trigger: '#trigger1',
            title: '选择时间',
            wheels: [{
                data: _data
            }],
            transitionEnd: function (indexArr, data) {
                console.log(data);
            },
            callback: function (indexArr, data) {
                console.log(data);
                $("#trigger1").val(data[0].value + '-' + data[1].value + '-' + data[2].value)
                numData = ['165', '205', '416', '365', '335', '294', '326', '204', '198', '108', '68']
                drawLine1()
            }
        });

        function drawLine1() {
            let timeData = ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
                '18:00'
            ]
           
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('mychart1'))

            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    top: '0',
                    left: '-2%',
                    right: '6%',
                    bottom: '8%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: timeData,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#999',
                            fontSize: 12
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(202,202,204,0.5)'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                }],
                yAxis: [{
                    show: false,
                    type: 'value'

                }],
                series: [{
                    name: '客流量',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    itemStyle: {
                        normal: { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(125,69,197,0.6)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(125,69,197,00)' // 100% 处的颜色
                            }]), // 背景渐变色
                            lineStyle: { // 系列级个性化折线样式
                                width: 1,
                                type: 'solid',
                                color: '#7D45C5'
                            }
                        }
                    }, // 线条样式
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#7D45C5',
                            fontFamily: 'DIN-Medium'
                        }
                    },
                    symbolSize: 6, // 折线点的大小
                    areaStyle: {
                        normal: {}
                    },
                    data: numData
                }]
            }
            myChart.setOption(option)
        }
        drawLine1()
    </script>
</body>

</html>